<template>
  <a-sub-menu v-if="!menu.meta?.hideInMenu" :key="menu.path">
    <template #icon>
      <component :is="menu.meta.icon" v-if="menu.meta.icon !== undefined" :key="menu.meta.icon" />
      <component
        :is="menu.meta.collapsedIcon"
        v-else-if="collapsed && menu.meta.collapsedIcon !== undefined"
        :key="menu.meta.collapsedIcon"
      />
    </template>
    <template #title>
      {{ $t(menu.meta.title) }}
    </template>
    <template v-for="child in menu.children">
      <a-menu-item
        v-if="(!child.children || child.meta?.hideChildrenInMenu) && !child.meta?.hideInMenu"
        :key="child.path"
        @mouseenter="$emit('itemHover', { key: child.path })"
      >
        <template #icon>
          <component
            :is="child.meta.icon"
            v-if="child.meta.icon !== undefined"
            :key="child.meta.icon"
          />
          <component
            :is="child.meta.collapsedIcon"
            v-else-if="collapsed && child.meta.collapsedIcon !== undefined"
            :key="child.meta.collapsedIcon"
          />
        </template>
        {{ $t(child.meta.title) }}
      </a-menu-item>
      <template v-else>
        <sub-menu :key="child.path" :menu="child" :collapsed="collapsed" />
      </template>
    </template>
  </a-sub-menu>
</template>

<script lang="ts" setup>
import type { RouteProps } from '../typing';
import type { PropType } from 'vue';
defineProps({
  menu: Object as PropType<RouteProps>,
  collapsed: Boolean,
});
defineEmits(['itemHover']);
</script>

<style scoped></style>
